<template>
  <div class="newspaper-subcribe">
    <div class="main">
      <div class="row">
        <div class="field-name">报纸名称</div>
        <div class="field-value arrow" @click="showPicker('newspaper')">
          <p :style="{ color: form.newspaper ? '#333333' : '#cccccc' }">
            {{ form.newspaper ? form.newspaper : "请选择" }}
          </p>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="row">
        <span class="field-name">住址信息</span>
        <span class="field-value"
          ><input
            type="text"
            placeholder="请输入住址信息"
            v-model="form.address"
        /></span>
      </div>
      <div class="row">
        <span class="field-name">邮编</span>
        <span class="field-value"
          ><input type="text" placeholder="请输入邮编" v-model="form.postCode"
        /></span>
      </div>
      <div class="row">
        <span class="field-name">联系方式</span>
        <span class="field-value"
          ><input type="text" placeholder="请输入手机号" v-model="form.mobile"
        /></span>
      </div>
    </div>
    <button class="send-btn" :style="isBm !== 0 ? 'background: #ccc;' : ''" :disabled="isBm === 1" @click="submit">{{isBm === 0 ? '提交' : '已订阅'}}</button>
    <!-- <div class="historylist">
      <p class="historytitle">历次申请记录</p>
      <div class="item" v-for="(item, i) in list" :key="i" @click="toDetail(item)">
        <div>
          <p>申请日期：{{ item.createTime }}</p>
          <p>{{ item.jzzw }}</p>
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <picker
      title="请选择"
      :columns="pickerOptions.pickerColumns"
      @fetchData="setData"
      :show="show"
      @cancel="hidePicker"
      @hide="hidePicker"
    ></picker>
  </div>
</template>

<script>
import picker from '../components/picker';
import {newspaperSubscribe, dyjhQuerydata4object, dyjhQuerydylslist, dyjhQuerydatadylsxq} from '@/assets/js/api';
export default {
  data() {
    return {
      show: false,
      form: {
        newspaper: '',
        address: '',
        postCode: '',
        mobile: ''
      },
      pickerOptions: {
        pickerColumns: [
          {
            label: '中国老年报',
            value: '中国老年报'
          },
          {
            label: '医药养生保健报',
            value: '医药养生保健报'
          }
        ]
      },
      list: [],
      isBm: 0,
      dspToken: localStorage.dspToken
    };
  },
  components: {
    picker
  },
  mounted() {
    // this.gethistoryList();
    let id = this.$route.query.id;
    dyjhQuerydata4object({
      dyjhId: id,
      dspToken: this.dspToken
    }).then(res => {
      this.isBm = res.data[0].isBm;
    });
  },
  methods: {
    gethistoryList() {
      dyjhQuerydylslist({
        dspToken: this.dspToken
      }).then(res => {
        this.list = res.data;
      });
    },
    showPicker(type) {
      this.type = type;
      this.show = true;
    },
    hidePicker(d) {
      this.show = d.showPicker;
    },
    setData(d) {
      if (this.type === 'newspaper') {
        this.form.newspaper = d.value.label;
      }
      this.show = d.showPicker;
    },
    submit() {
      if (!this.form.newspaper) {
        return this.$toast('请填写报纸名称');
      }
      if (!this.form.address) {
        return this.$toast('请填写住址信息');
      }
      if (!this.form.postCode) {
        return this.$toast('请填写邮编');
      }
      if (!this.form.mobile) {
        return this.$toast('请填写手机号');
      }

      let id = this.$route.query.id;
      newspaperSubscribe({
        bzmc: this.form.newspaper,
        zzxx: this.form.address,
        yb: this.form.postCode,
        sjh: this.form.mobile,
        dyjhId: id,
        dspToken: this.dspToken
      }).then(data => {
        this.$toast('报刊订阅成功！');
        history.go(-1);
        // this.gethistoryList();
      });
    },
    toDetail(v) {
      dyjhQuerydatadylsxq({
        dspToken: this.dspToken,
        zxqkId: v
      }).then(({data}) => {
        const o = data[0];
        this.$router.push({
          name: 'detail',
          query: {
            title: '报刊订阅报名历史详情',
            data: JSON.stringify({
              '参加的社会活动类型': o.hdlx,
              '活动时间': o.hdsj,
              '离京情况': o.ljqk,
              '参加事由': o.cjsy,
              '目的地': o.cjsy, // 字段待确定
              '离京开始时间': o.cjsy,
              '离京结束时间': o.cjsy
            })
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.newspaper-subcribe {
  min-height: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 22px;
  .main {
    background-color: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    .row {
      display: flex;
      height: 114px;
      padding: 0 40px;
      align-items: center;
      justify-content: space-between;
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
      .field-name {
        min-width: 140px;
        font-size: 34px;
        color: #888;
      }
      .field-value {
        font-size: 34px;
        letter-spacing: 0px;
        color: #353535;
        > input {
          width: 100%;
          height: 100%;
          text-align: right;
        }
      }
      .arrow {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 34px;
        color: #888;
        text-align: right;
      }
    }
  }
  .send-btn {
    width: 100%;
    border: none;
    height: 90px;
    line-height: 90px;
    margin-top: 29px;
    text-align: center;
    background-color: #3198ed;
    box-shadow: 0px 5px 5px 0px rgba(89, 166, 250, 0.1);
    border-radius: 45px;
    font-size: 36px;
    letter-spacing: 7px;
    color: #fff;
  }
  .historylist {
    .historytitle {
      color: #888888;
      font-size: 30px;
      margin: 19px 0;
    }
    .item {
      width: 704px;
      // height: 140px;
      background-color: #ffffff;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      margin: 0 auto;
      margin-top: 23px;
      position: relative;
      padding: 31px 30px 26px 33px;
      box-sizing: border-box;
      display: flex;
      &::before {
        content: "";
        width: 5px;
        // height: 140px;
        background-color: #3198ed;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      > div:first-child {
        flex: 1;
        p:first-child {
          color: #888888;
          font-size: 30px;
        }
        p:last-child {
          width: calc(100vw - 160px);
          color: #353535;
          font-size: 34px;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
      }
      > div:last-child {
        width: 50px;
        font-size: 34px;
        color: #b2b2b2;
        align-self: center;
        text-align: right;
      }
    }
  }
}
</style>
